<template>
    <div class="add-goods">
         <div class="form">
             <div class="form-item">
                 <span class="label">商品显示名称<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入商品显示名称"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">商品名</span>
                 <div class="conts">
                     <el-input placeholder="请输入商品名称"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">药品通用名<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入药品通用名"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">会员销售价<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入会员销售价"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">参考零售价</span>
                 <div class="conts">
                     <el-input placeholder="请输入参考零售价"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">医保支付价</span>
                 <div class="conts">
                     <el-input placeholder="请输入医保支付价"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">批准文号</span>
                 <div class="conts">
                     <el-input placeholder="请输入批准文号"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">批号<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入批号"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">生产厂商<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入生产厂商"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">条形码</span>
                 <div class="conts">
                     <el-input placeholder="请输入条形码"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">产品规格<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-input placeholder="请输入产品规格"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">产地</span>
                 <div class="conts">
                     <el-input placeholder="请输入产地"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">税率</span>
                 <div class="conts">
                     <el-input placeholder="请输入税率"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">注册商标</span>
                 <div class="conts">
                     <el-input placeholder="请输入注册商标"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">销售单位</span>
                 <div class="conts">
                     <el-input placeholder="请输入销售单位"></el-input>
                 </div>
             </div>
             <div class="form-item">
                 <span class="label">有效期</span>
                 <div class="conts">
                     <el-input placeholder="请输入有效期"></el-input>
                 </div>
             </div>
              <div class="form-item">
                 <span class="label">OTC/RX<i class="require-icon">*</i></span>
                 <div class="conts">
                     <el-select v-model="form.a">
                         <el-option value=""></el-option>
                     </el-select>
                 </div>
             </div>
             <div class="form-item">
                    <span class="label">优质优价中成药</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">中药保护品种</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">委托加工</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">包装标签</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">说明书</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">商品状态<i class="require-icon">*</i></span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">药品剂型</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">医保类型</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">品牌</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">所属分类<i class="require-icon">*</i></span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">质量标准</span>
                    <div class="conts">
                        <el-input placeholder="请输入质量标准"></el-input>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">是否为特殊药品</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">是否需要冷藏</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">每件数量</span>
                    <div class="conts">
                        <el-input placeholder="请输入每件数量"></el-input>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">中包装数量</span>
                    <div class="conts">
                        <el-input placeholder="请输入中包装数量"></el-input>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">是否含麻黄碱</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item">
                    <span class="label">是否参与返点</span>
                    <div class="conts">
                        <el-select v-model="form.a">
                            <el-option value=""></el-option>
                        </el-select>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">成分</span>
                    <div class="conts">
                        <textarea placeholder="请输入成分,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">药物相互作用</span>
                    <div class="conts">
                        <textarea placeholder="请输入药物相互作用,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">性状</span>
                    <div class="conts">
                        <textarea placeholder="请输入性状,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">用法用量</span>
                    <div class="conts">
                        <textarea placeholder="请输入用法用量,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">包装</span>
                    <div class="conts">
                        <textarea placeholder="请输入包装,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">禁忌</span>
                    <div class="conts">
                        <textarea placeholder="请输入禁忌,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">执行标准</span>
                    <div class="conts">
                        <textarea placeholder="请输入执行标准,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">注意事项</span>
                    <div class="conts">
                        <textarea placeholder="请输入注意事项,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">储藏</span>
                    <div class="conts">
                        <textarea placeholder="请输入储藏,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">不良反应</span>
                    <div class="conts">
                        <textarea placeholder="请输入不良反应,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">功能主治</span>
                    <div class="conts">
                        <textarea placeholder="请输入功能主治,不得超过1000个字" maxlength="1000"></textarea>
                    </div>
              </div>
              <div class="form-item special">
                    <span class="label">上传图片</span>
                    <div class="conts">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        >
                        <img v-if="imageUrl" :src="imageUrl" class="img">
                        <div class="no-img" v-else>
                             <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                        </el-upload>
                    </div>
              </div>
         </div>
         <div class="control">
             <el-button type="primary">保存</el-button>
         </div>
    </div>
</template>
<script>
export default {
    name: 'addGoods',
    data () {
        return {
            form: {
                a: ''
            },
            imageUrl: ''
        }
    }
}
</script>
<style lang="scss" scoped>
.add-goods {
    overflow: hidden;
    .form {
        background: #fff;
        overflow: hidden;
        padding: 20px 10px 10px;
        .form-item {
            width: 400px;
            float: left;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            &.special {
                float:initial;
                width: 800px;
                align-items: initial;
                .label {
                    position: relative;
                    top: 8px;
                }
            }
            .label {
                display: inline-block;
                width: 140px;
                text-align: right;
                .require-icon {
                    color: #f00;
                }
            }
            .conts {
                padding-left: 10px;
                flex: 1;
                .el-input {
                    width: 100%;
                }
                .el-select {
                    width: 100%;
                }
                textarea {
                    width: 100%;
                    height: 100px;
                    border: 1px solid #ddd;
                }
                .img {
                    width: 176px;
                    height: 176px;
                }
                .no-img {
                    border: 1px dashed #ddd;
                    border-radius: 2px;
                    width: 176px;
                    height: 176px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }
    .control {
        padding-top: 16px;
    }
}
</style>